<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
          <el-form-item prop="phonenumber">
            <el-input v-model="queryParams.phonenumber" placeholder="请输入用户ID/手机号" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item style="width: 300px" prop="dateRange">
            <el-date-picker v-model="queryParams.dateRange" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button icon="primary" @click="expertQuery">高级查询</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-col :span="1.5">
              <el-button type="info" plain @click="handleRepeal" v-hasPermi="['system:user:export']">撤销黑名单</el-button>
            </el-col>
          </el-col>
          <el-col :span="1.5">
            <el-dropdown @command="handleCommandExport">
              <el-button type="warning">
                导出数据<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="a">选中用户</el-dropdown-item>
                  <el-dropdown-item command="b">全部用户</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col :span="1.5">
            <el-dropdown @command="handleSort">
              <el-button>
                排序方式<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">按订单数量</el-dropdown-item>
                  <el-dropdown-item command="2">按担保金额</el-dropdown-item>
                  <el-dropdown-item command="3">按注册时间</el-dropdown-item>
                  <el-dropdown-item command="4">按会员等级</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户ID" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="用户手机号" align="center" key="phone" prop="phone" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="会员等级" align="center" key="grade" prop="grade" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="担保金额" align="center" key="loanDot" prop="loanDot" v-if="columns[4].visible" width="120" />
          <el-table-column label="担保笔数" align="center" key="loanToal" prop="loanToal" v-if="columns[5].visible" width="120" />
          <el-table-column label="剩余贷还" align="center" key="residue" prop="residue" v-if="columns[6].visible" width="120" />
          <el-table-column label="账户启用状态" align="center" key="status" prop="status" v-if="columns[7].visible" width="120">
            <template #default="scope">
              <el-switch v-model="scope.row.status" disabled />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="查看" placement="top">
                <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
      </el-col>
    </el-row>
    <!-- 撤销黑名单 -->
    <el-dialog title="撤销黑名单" v-model="openRepeal" width="600px" append-to-body>
      <el-form :model="formRepeal" ref="tagRepeal" label-width="130px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="撤销对象：" prop="label">
              <div>
                共<span style="color: red">{{ formRepeal.total }}</span
                >个用户
              </div>
            </el-form-item>
            <el-form-item label="选中列表：">
              <el-input readonly v-model="formRepeal.list" rows="4" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openRepeal = false">取 消</el-button>
          <el-button type="primary" @click="repealSumbit">确定撤销</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 高级检索对话框 -->
    <el-dialog title="高级检索" v-model="expertShow" width="600px" append-to-body>
      <el-form :model="form" ref="searchRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户账号" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户账号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户姓名" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户来源" prop="deptId">
              <el-select v-model="form.deptId" placeholder="全部" clearable style="width: 293px">
                <el-option v-for="dict in userSource" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员等级" prop="member">
              <el-select v-model="form.member" placeholder="全部" clearable style="width: 293px">
                <el-option v-for="dict in classArr" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户标签" prop="userTag">
              <el-select v-model="form.userTag" placeholder="全部" clearable style="width: 293px">
                <el-option v-for="dict in tagArr" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册时间" prop="timer">
              <el-date-picker v-model="form.timer" type="datetime" placeholder="请选择时间" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="cancel">重置</el-button>
          <el-button @click="submitForm">开始检索</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Blacklist">
import { getToken } from "@/utils/auth";
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";
import customerInfo from "../../loan-before/components/index";
const router = useRouter();
const { proxy } = getCurrentInstance();
//  const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

const expertShow = ref(false);
const userSource = ref([
  { value: "0", label: "PC端" },
  { value: "1", label: "移动端" },
  { value: "2", label: "WX端" },
]);
const classArr = ref([
  { value: "0", label: "注册会员" },
  { value: "1", label: "普通会员" },
  { value: "2", label: "黄金会员" },
  { value: "3", label: "白金会员" },
  { value: "4", label: "钻石会员" },
  { value: "5", label: "PLUS会员" },
]);
const tagArr = ref([]); //接口获取
const userList = ref([
  { userId: "8447466", phone: "18000000000", nickName: "赵欣", grade: "黄金会员", loanDot: "¥20000.00", loanToal: "10", residue: "¥1000.00", status: true },
  { userId: "8447467", phone: "18000000000", nickName: "王晓", grade: "白银会员", loanDot: "¥100000.00", loanToal: "10", residue: "¥3000.00", status: true },
  { userId: "8447468", phone: "18000000000", nickName: "朱萍", grade: "黄金会员", loanDot: "¥40000.00", loanToal: "10", residue: "¥1000.00", status: true },
  { userId: "8447469", phone: "18000000000", nickName: "李黎", grade: "普通会员", loanDot: "¥10000.00", loanToal: "10", residue: "¥2000.00", status: true },
  { userId: "8447488", phone: "18000000000", nickName: "秦川", grade: "铂金会员", loanDot: "¥200000.00", loanToal: "10", residue: "¥1000.00", status: true },
  { userId: "8447489", phone: "18000000000", nickName: "孙镇", grade: "铂金会员", loanDot: "¥200000.00", loanToal: "10", residue: "¥1000.00", status: false },
]);
const repealList = ref([]);
const openRepeal = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const total = ref(6);
// 列显隐信息
const columns = ref([
  { key: 0, label: `用户ID`, visible: true },
  { key: 1, label: `用户手机号`, visible: true },
  { key: 2, label: `用户姓名`, visible: true },
  { key: 3, label: `会员等级`, visible: true },
  { key: 4, label: `担保金额`, visible: true },
  { key: 5, label: `担保笔数`, visible: true },
  { key: 6, label: `剩余贷还`, visible: true },
  { key: 7, label: `账户启用状态`, visible: true },
]);

const data = reactive({
  form: {},
  formRepeal: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined,
    contarn: undefined,
  },
});
const { formRepeal, queryParams, form } = toRefs(data);
/** 重置操作表单 */
function resetRepeal() {
  formRepeal.value = {
    list: undefined,
    total: undefined,
  };
}
/** 撤销黑名单  */
function handleRepeal() {
  resetRepeal();
  if (ids.value.length > 0) {
    openRepeal.value = true;
    formRepeal.value.total = ids.value.length;
    formRepeal.value.list = repealList.value.toString();
  } else {
    proxy.$modal.msgWarning("请至少选中一条数据");
  }
}
/** 确定撤销黑名单  */
function repealSumbit() {
  openRepeal.value = false;
  proxy.$modal.msgSuccess("撤销黑名单成功");
}
/** 导出 */
function handleCommandExport(val) {
  if (val == "a") {
    if (ids.value.length > 0) {
      proxy.$modal.msgSuccess("选中导出数据成功");
    } else {
      proxy.$modal.msgWarning("请至少选中一条数据");
    }
  } else {
    proxy.$modal.msgSuccess("全部导出数据成功");
  }
}
/** 排序 */
function handleSort(val) {
  getList();
}
/** 高级查询*/
function expertQuery() {
  expertShow.value = true;
}
/** 查询用户列表 */
function getList() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 600);
  return;
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page_count = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 删除按钮操作 */
function handleDelete(row) {
  const userIds = row.userId || ids.value;
  proxy.$modal
    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
    .then(function () {
      return delUser(userIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/user/export",
    {
      ...queryParams.value,
    },
    `user_${new Date().getTime()}.xlsx`
  );
}
/** 用户状态修改  */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.userName + '"用户吗?')
    .then(function () {
      return changeUserStatus(row.userId, row.status);
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功");
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0";
    });
}
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.userId);
  repealList.value = selection.map((item) => item.nickName);
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "用户导入";
  upload.open = true;
}
/** 下载模板操作 */
function importTemplate() {
  proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`);
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};
/** 重置操作表单 */
function reset() {
  form.value = {
    nickName: undefined,
    deptId: undefined,
    userName: undefined,
    member: undefined,
    userTag: undefined,
    timer: undefined,
  };
  proxy.resetForm("searchRef");
}
/** 重置按钮 */
function cancel() {
  reset();
}
/** 查看按钮操作 */
function handleView(row) {
  console.log(row, "row");
  router.push({ path: "infos", query: { id: row.userId } });
}
/** 提交按钮 */
function submitForm() {
  getList();
  expertShow.value = false;
}
// getList();
</script>
<style scoped>
.explain {
  line-height: 40px;
  font-size: 12px;
  margin-left: 90px;
}
</style>
